<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新增布局</title>
    <style>
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<header>
    <h1>尚品汇</h1>
</header>

<hr>
<nav>
    <a href="#">首页</a>
    <a href="#">登录</a>
    <a href="#">注册</a>
    <a href="#">我的</a>
</nav>

<hr>

<div class="clearfix">
    <article>
        <h2>如何一夜暴富</h2>
        <section>
            <h3>第一种方式</h3>
            <p>你要这么做梦XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        </section>
        <section>
            <h3>第二种方式</h3>
            <p>你要这么做梦YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</p>
        </section>
    </article>

    <aside style="float: right">
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">我的</a></li>
            </ul>

        </nav>
    </aside>

    手机电量:<meter value="85" min="0" max="100" low="30" high="80" optimum="90" ></meter>50
    进度 : <progress max="100" value="60"></progress>
</div>
</body>
</html>